<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
<canvas id="myCanvas" width="360" height="650"></canvas>
</template>

<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();

/*
* 点击方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks:点击次数
*/
let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
    facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
	if (view.viewName == "Button") {
		alert(view.text);
	} else if (view.viewName == "Button2") {
		alert(view.text);
	} else if (view.viewName == "Button3") {
		alert(view.text);
	} else if (view.viewName == "Button4") {
		alert(view.text);
	}
};

/*
* 鼠标按下实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseDown = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseDownDefault(view, mp, buttons, clicks, delta);
};

/*
* 鼠标移动实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseMove = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseMoveDefault(view, mp, buttons, clicks, delta);
};

/*
* 鼠标滚动实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseWheel = function (view, mp, buttons, clicks, delta) {
	if (window.event.ctrlKey && view.paint) {
		//放大显示
		if (delta < 0) {
			view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
			view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
			//resizeAll();
			//缩小显示
		} else if (delta > 0) {
			if (view.paint.scaleFactorX > 0.2) {
				view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
				view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
				//resizeAll();
			}
		}
		return;
	}
	facecat.onMouseWheelDefault(view, mp, buttons, clicks, delta);	
};

/*
* 鼠标抬起实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseUp = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseUpDefault(view, mp, buttons, clicks, delta);	
};

/*
* 触摸开始方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchBegin = function (view, firstTouch,  firstPoint, secondTouch, secondPoint) {
	facecat.onTouchBeginDefault(view, firstTouch,  firstPoint, secondTouch, secondPoint);
};

/*
* 触摸移动方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchMove = function (view, firstTouch,  firstPoint, secondTouch, secondPoint) {
	facecat.onTouchMoveDefault(view, firstTouch,  firstPoint, secondTouch, secondPoint);	
};

/*
* 触摸结束方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchEnd = function (view, firstTouch,  firstPoint, secondTouch, secondPoint) {
	facecat.onTouchEndDefault(view, firstTouch,  firstPoint, secondTouch, secondPoint);	
};

/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};
	
export default { 
	data() {
		return {
		}
	},
	onLoad() {
	}, 
	mounted(){
			const canvas = document.getElementById('myCanvas');
			gPaint.isMobile = facecat.isMobileMode();
			window.addEventListener('resize', resizeAll, true);
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			gPaint.canvas = canvas;
			facecat.scaleCanvas(gPaint);
			//注册事件
			facecat.addMouseDownEvent(canvas, onMouseDown);
			facecat.addMouseMoveEvent(canvas, onMouseMove);
			facecat.addMouseWheelEvent(canvas, onMouseWheel);
			facecat.addMouseUpEvent(canvas, onMouseUp, onClick);
			facecat.addTouchBeginEvent(canvas, onTouchBegin);
			facecat.addTouchMoveEvent(canvas, onTouchMove);
			facecat.addTouchEndEvent(canvas, onTouchEnd, onClick);
			/*
			* 重绘背景的实现方法
			* view:视图
			* paint:绘图对象
			* clipRect:裁剪区域
			*/
			gPaint.onPaint = function (view, paint, clipRect) {
				if (view.viewName == "Button4") {
					paint.fillRect("rgb(255,0,0)", 0, 0, view.size.cx, view.size.cy);
				} else {
					facecat.onPaintDefault(view, paint, clipRect);
				}
			};
					
			/*
			* 重绘边框的实现方法
			* view:视图
			* paint:绘图对象
			* clipRect:裁剪区域
			*/
			gPaint.onPaintBorder = function (view, paint, clipRect) {
				facecat.onPaintBorderDefault(view, paint, clipRect);
			};
			 /*
			  * 更新布局的实现方法
			  * views:视图集合
			  */
			gPaint.onUpdateView = function (views) {
				facecat.updateViewDefault(views);
			}
			//解析加载XML
			let xml = `<?xml version="1.0" encoding="utf-8"?>
			<html xmlns="facecat">
			  <head>
			  </head>
			  <body>
				<div dock="fill" type="tab" selectedindex="0">
				  <div name="TabPage" text="可视化生成" type="tabpage">
					<input type="button" name="Button" text="取消" location="35,50" size="100,20" backcolor="rgb(170,178,189)" cornerradius="4" textcolor="rgb(255,255,255)" />
					<input type="button" name="Button2" text="确认" location="32,92" size="130,38" font="Default,16.0" backcolor="rgb(59,174,218)" bordercolor="rgb(255,0,0)" textcolor="rgb(255,255,255)" />
					<input type="button" name="Button3" text="查询" location="33,155" size="100,42" textcolor="rgb(0,0,5)" backcolor="rgb(140,192,81)" font="Default,14.0" cornerradius="10" />
				  </div>
				  <div name="TabPage2" text="代码创建" type="tabpage" />
				  <div name="TabPage3" text="自定义重绘" type="tabpage">
					<input type="custom" cid="mybutton" name="Button4" text="删除" location="74,84" size="100,40" />
				  </div>
				</div>
			  </body>
			</html>
			`;
			facecat.renderFaceCat(gPaint, xml);
			//获取第二页
			let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
			let button = new facecat.FCButton();
			button.location = new facecat.FCPoint(100, 100);
			button.size = new facecat.FCSize(100, 20);
			button.backColor = "rgb(255,255,255)";
			button.textColor = "rgb(0,0,0)";
			button.borderColor = "rgb(150,150,150)";
			facecat.addViewToParent(button, tabPage);
			button.text = "确定";		
				},
			methods: {  
	}
}
</script>
